<template>
	<div class="app-container">
		<jk-operation-card>
			<div ref="box1" class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
					<jk-add-button :permission-prefix="prefix" class="item-gap" @click="onAddBtn">新增</jk-add-button>
					<!--<jk-report-button :permission-prefix="prefix" :loading="exportLoading" @click="onReportBtn">导出</jk-report-button>-->
				</div>
				<div class="flex-end-center-wrap">
					<jk-search-input v-model="searchParams.name" placeholder="名称" clearable size="small" class="search-bar-item-size2 item-gap margin-5-0" @clear="onSearchBtn" @keyup.enter.native="onSearchBtn" />
					<jk-search-button type="primary" icon="el-icon-search" size="small" @click="onSearchBtn">搜索</jk-search-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card class="margin-top-10">
			<jk-table ref="jkTable" :loading="tableLoading" :data="roleList" border :height="tableHeight + 8">
				<vxe-table-column field="code" title="编号" sortable :min-width="100" />
				<vxe-table-column field="name" title="名称" :min-width="120" />
				<vxe-table-column field="sort" title="序号" width="70" align="center" />
				<vxe-column title="创建人" align="left" field="creatorName" width="90"></vxe-column>
				<vxe-column title="创建时间" align="left" field="createTime" width="160"></vxe-column>
				<vxe-column title="修改人" align="left" field="updaterName" width="90"></vxe-column>
				<vxe-column title="修改时间" align="left" field="updateTime" width="160"></vxe-column>
				<vxe-table-column field="type" title="类型" width="80" align="center">
					<template #default="scope">
						<el-tag :type="scope.row.type === 1 ? 'danger' : 'primary'" size="mini">{{ scope.row.type === 1 ? '内置' : '自定义' }}</el-tag>
					</template>
				</vxe-table-column>
				<vxe-table-column title="权限" width="200" align="center">
					<template #default="scope">
						<div class="flex-center">
							<jk-button
								size="mini"
								type="text"
								icon="el-icon-menu"
								:has-permission="getPermission([`${prefix}:menu`])"
								@click="handleMenu(scope.row)"
							>菜单</jk-button>
							<jk-button
								size="mini"
								type="text"
								icon="el-icon-coin"
								:has-permission="getPermission([`${prefix}:data`])"
								@click="handleDataScope(scope.row)"
							>数据</jk-button>
						</div>
					</template>
				</vxe-table-column>
				<vxe-table-column align="center" title="操作" fixed="right" width="170">
					<template #default="scope">
						<div class="flex-center">
							<jk-delete-button class="item-gap" :permission-prefix="prefix" :disabled="scope.row.type === 1" @on-confirm="onDeleteBtn(scope.row)">删除</jk-delete-button>
							<jk-edit-button :permission-prefix="prefix" :disabled="scope.row.type === 1" @click="onEditBtn(scope.row)">修改</jk-edit-button>
						</div>
					</template>
				</vxe-table-column>
			</jk-table>
			<footer ref="box2" class="flex-end-center margin-top-10">
				<jk-page
					:page-index="searchParams.pageNo"
					:page-sizes="searchParams.pageSizes"
					:page-size="searchParams.pageSize"
					:total="searchParams.count"
					@on-change="onPageChange"
				/>
			</footer>
		</jk-card>

		<!-- 新增/编辑 -->
		<saveDialog
			:dialog-state="saveDialogState"
			:data-id="dataId"
			@on-confirm="onConfirmBtnOfSaveDialog"
			@on-visible-change="onVisibleChange"
		></saveDialog>
		<!-- 分配数据权限 -->
		<set-data-dialog
			:dialog-state="setDataDialogState"
			:data-id="dataId"
			:target-name="setTargetName"
			@on-confirm="onConfirmBtnOfSetDataDialog"
			@on-visible-change="onVisibleChangeOfSetDataDialog"
		></set-data-dialog>
		<!-- 分配菜单 -->
		<set-menu-dialog
			:dialog-state="setMenuDialogState"
			:target-name="setMenuDialogTargetName"
			:data-id="dataId"
			@on-confirm="onConfirmBtnOfSetMenuDialog"
			@on-visible-change="onVisibleChangeOfSetMenuDialog"
		></set-menu-dialog>
	</div>
</template>

<script>
    import {
        delRole,
        exportRole,
        listRole
    } from '@/api/system/role';
    import { pageConfig } from '../../../utils/jk/jk-tool';
    import permissionMixin from '../../../mixins/permission-mixin';
    import calHeight from '../../../mixins/cal-table-height';
    import saveDialog from './save-dialog';
    import setDataDialog from './set-data-dialog';
    import setMenuDialog from './set-menu-dialog';
    export default {
        name: 'Role',
        components: {
            saveDialog,
            setDataDialog,
            setMenuDialog
        },
        mixins: [permissionMixin, calHeight],
        data() {
            return {
                prefix: 'system:role',
                setTargetName: '',
                setMenuDialogTargetName: '',
                setMenuDialogState: false,
                setDataDialogState: false,
                dataId: null,
                tableLoading: true,
                exportLoading: false,
                showSearch: true,
                roleList: [],
                saveDialogState: false,
                searchParams: {
                    count: 0,
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    name: undefined,
                    status: undefined
                }
            };
        },
        created() {
            this.getListRequest();
        },
        methods: {
            onPageChange(pageIndex, pageSize) {
                this.searchParams.pageNo = pageIndex;
                this.searchParams.pageSize = pageSize;
                this.getListRequest();
            },
            onConfirmBtnOfSetMenuDialog() {
                this.setMenuDialogState = false;
                this.getListRequest();
            },
            onVisibleChangeOfSetMenuDialog(e) {
                if (!e) {
                    this.dataId = null;
                }
                this.setMenuDialogState = e;
            },
            // 取消按钮（数据权限）
            onVisibleChangeOfSetDataDialog(e) {
                if (!e) {
                    this.dataId = null;
                }
                this.setDataDialogState = e;
            },
            onConfirmBtnOfSetDataDialog() {
                this.setDataDialogState = false;
                this.getListRequest();
            },
            onVisibleChange(e) {
                if (!e) {
                    this.dataId = null;
                }
                this.saveDialogState = e;
            },
            /** 查询角色列表 */
            getListRequest() {
                this.tableLoading = true;
                listRole(this.searchParams).then((res) => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.roleList = res.data.res;
                        this.searchParams.count = res.data.count;
                    }
                });
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.searchParams.pageNo = 1;
                this.getListRequest();
            },
            /** 新增按钮操作 */
            onAddBtn() {
                this.saveDialogState = true;
            },
            /** 修改按钮操作 */
            onEditBtn(row) {
                this.dataId = row.id;
                this.saveDialogState = true;
            },
            /** 分配菜单权限操作 */
            handleMenu(row) {
                this.setMenuDialogTargetName = row.name;
                this.dataId = row.id;
                this.setMenuDialogState = true;
            },
            /** 分配数据权限操作 */
            handleDataScope(row) {
                this.setTargetName = row.name;
                this.dataId = row.id;
                this.setDataDialogState = true;
            },
            /** 提交按钮 */
            onConfirmBtnOfSaveDialog() {
                this.saveDialogState = false;
                this.getListRequest();
            },
            /** 删除按钮操作 */
            onDeleteBtn(row) {
                const ids = row.id || this.ids;
                delRole(ids).then(() => {
                    this.getListRequest();
                    this.$tipsBar(this, 'delete');
                }).catch(() => {});
            },
            /** 导出按钮操作 */
            onReportBtn() {
                const searchParams = this.searchParams;
                this.$confirm('是否确认导出所有角色数据项?', { type: 'warning' }).then(() => {
                    this.exportLoading = true;
                    return exportRole(searchParams);
                }).then(res => {
                    this.$download.excel(res, `${this.$route.meta.name}.xls`);
                    this.exportLoading = false;
                }).catch(() => {});
            }
        }
    };
</script>

<style scoped lang="scss">
</style>
